<template>
  <div class="rightsidenew">
    <mapView ref="mapRef" @closeplotpanpel="closeplotpanpel" :deviceArr="deviceArrGet.value" :data="mapData.value" @openPlotInfo="openPlotInfo" />
  </div>
  <div class="treewrap">
    <tree @changeShowDeviceSet="changeShowDeviceSet" ref="treeOne" :data="data" />
    <tree @changeShowSs="changeShowSs" :type="true" ref="treeTwo" :data="data2" />
  </div>

  <div class="rightContent d-flex indexwrap">
    <!-- <pieChartS :tips="rate[0].tips" :colorObj="rate[0].colorData" /> -->
    <div class="right2" v-if="showAdd">
      <div class="title" v-if="rk!='admin-gov'">
        <div class="btn flexcenter" @click="addPlot">
          <span class="icon">
            <el-icon color="#fff" class="no-inherit">
              <Plus />
            </el-icon>
          </span>
          新增圈地
        </div>
        <div class="btn flexcenter" @click="openGroup()">
          <span class="icon">
            <el-icon color="#fff" class="no-inherit">
              <Plus />
            </el-icon>
          </span>
          地块编组
        </div>
      </div>
      <!-- @check-change="handleCheckChange"
       show-checkbox
      -->
      <div class="tree treeindex">
        <el-tree
          :props="propsTree"
          :data="dataTree.value"
          :expand-on-click-node="false"
          
          @node-click="clickNode"
          :highlight-current="false"
        >
        <template #default="{ node, data }">
         
          <span class="flexspanadd1">
            <span @click="goPlotDetail(data)">{{ node.label }}</span>
            
            <span class="nodeicon" v-if="data.type=='father'&&rk!='admin-gov'">
              <el-icon @click="handleNode(data)"><More/></el-icon>
              <div class="handlebox" v-if="data.handleFlag">
                <el-button size="small" @click="openEditGroup(data)" type="primary">重命名</el-button>
                <el-button size="small" @click="deleteOneGroup(data)" type="danger">删除编组</el-button>
              </div>
            </span>
            
          </span>
        </template>
      </el-tree>
      </div>
      <div class="icons">
        <div
          v-for="(item, index) in crops"
          :key="index"
          class="iconInfo d-flex ai-center"
        >
          <div
            class="icon" :style="{backgroundColor:item.bgColor,border:`1px solid ${item.bdColor}`}"
          ></div>
          <div class="name">{{ item.name }}</div>
        </div>
      </div>
    </div>
    
  </div>

  <div class="bottomwrap">
    <div
      :class="[index % 2 == 0 ? 'long' : '', 'child flexcenter']"
      v-for="(item, index) in inconArr"
      :key="index"
    >
      <img class="icon" :src="item.img" alt="" />
      {{ item.name }}
    </div>
  </div>
  <div class="rightwrap" v-if="!showAdd">
    <div class="title">
      <div class="t1">
        {{ onePlotInfo.value ? onePlotInfo.value.plotName : "" }}
      </div>
      <div class="curp" @click="showAdd = !showAdd">
        <el-icon><CircleClose /></el-icon>
      </div>
    </div>
    <div class="infowrap">
     
      <div class="rinfo">
        <img src="@/assets/img/add3.png" class="add" alt="" />
        <div class="rinfo1">
          <div class="label">种植品种</div>
          <div class="name">
            {{
              onePlotInfo.value &&
              onePlotInfo.value.crops &&
              onePlotInfo.value.crops.length > 0
                ? onePlotInfo.value.crops[0]["cropsSubclassName"]
                : "暂无"
            }}
          </div>
        </div>
      </div>
      <div class="rinfo rinfo5">
        <img src="@/assets/img/add2.png" class="add" alt="" />
        <div class="rinfo1">
          <div class="label">种植作物</div>
          <div class="name">
            {{
              onePlotInfo.value &&
              onePlotInfo.value.crops &&
              onePlotInfo.value.crops.length > 0
                ? onePlotInfo.value.crops[0]["categoryName"]
                : "暂无"
            }}
          </div>
        </div>
      </div>
    </div>
    <div class="szzt">
      <div class="smallt">生长状态</div>
      <div class="stab">
        <div :class="[ygType==0?'stabca':'','stabc']" @click="changeShowType(0)">长势监测仪</div>
        <div :class="[ygType==1?'stabca':'','stabc']" @click="changeShowType(1)">遥感影像</div>
        <div :class="[ygType==2?'stabca':'','stabc']" @click="changeShowType(2)">无人机巡检</div>
      </div>
      <div  v-if="picShowList.value.length>0">
        <div class="picscroll scrolldiv" v-if="ygType==1">
          <img
          @click="lookYg(index)"
          v-for="(item,index) in picShowList.value" :key="index"
          :src="'https://wx.linzhiag.com/eqq-plantapp'+item.img" class="spic" alt="" />
        </div>  
        <div class="picscroll scrolldiv" v-if="ygType==0">
          <img
          v-for="(item,index) in picShowList.value" :key="index"
          @click="lookYg2(index)" :src="item.data['image']" class="spic" alt="" />
        </div>
      </div>
      <div class="picscroll scrolldiv" v-else>
        <div class="nodataadd">
          暂无数据
        </div>
       
      </div>
      
    </div>
    <div class="szzt szztscroll scrolldiv">
      <div class="smallt">农事记录</div>
      <!-- <div class="stab">
        <div class="stabca stabc">今日提醒</div>
        <div class="stabc">待办事项</div>
        <div class="stabc">历史记录</div>
      </div> -->
      <div class="thing">
        <div
          class="thingc"
          v-for="(item, index) in showfarmList.value"
          :key="index"
        >
          <div class="date">{{ item.content }}</div>
          <div class="date">{{ item.startTime }} - {{ item.endTime }}</div>
          <div class="thingw" style="margin-bottom:10px;"  v-if="item.content!='收割'">
            <div class="pb" v-if="item.materialDetails&&item.materialDetails.length>0">
                <el-table :data="item.materialDetails" style="width: 100%">
                  <el-table-column prop="categoryName" label="农资类型" />
                  <el-table-column prop="name" label="农资名称" />
                  <el-table-column prop="dosage" label="用量" />
                  <el-table-column prop="totalCost" label="花费" />
                </el-table>
            </div>
          </div>
          <div class="thingw">
            <div class="thingc1" v-if="item.content=='收割'">
              <img src="@/assets/img/s2.png" alt="" />
              收割数量:{{item.collectCount?item.collectCount+'KG':'-'}}
            </div>
            <div class="thingc1">
              <img src="@/assets/img/s2.png" alt="" />
              人工总费用:{{ item.humanCost?item.humanCost:'-' }}
            </div>
            <div class="thingc1">
              <img src="@/assets/img/s3.png" alt="" />
              人天数:{{ item.humanUse?item.humanUse:'-' }}
            </div>
            <div class="thingc1">
              <img src="@/assets/img/s1.png" alt="" />
              备注:{{ item.comment?item.comment:'-' }}
            </div>
          </div>
          <div class="picscroll scrolldiv" v-if="item.picUrls">
            <img
              v-for="(item, index) in item.picUrls"
              :key="index"
              :src="'https://' + item.imageUrl"
              class="spic2"
              alt=""
            />
          </div>
        </div>
      </div>
      <div class="fy">
            <div class="total flexcenter">
              共 <span>{{ total }}</span>项数据
            </div>
            <el-pagination background
              :currentPage="pageNum"
              :page-size="12"
              @current-change="currentChange"
            layout="prev, pager, next" :total="total" />
        </div>
    </div>
  </div>
  <quandi ref="quandiRef" />
  <group ref="group" @getGroupList="getGroupList"  :list="plotOptionList.value"/>
  <el-dialog
            v-model="dialogVisibleCmm"
            title="编组重新命名"
            width="570px"
            custom-class="diyclass"
        >
            <div class="mcontent">
              <div class="mchild">
                  <div class="label">
                  请输入编组名称:
                  </div>
                  <el-input  
                  v-model="reNameForm.plotGroupName"
                  placeholder="请输入"  ></el-input>
                  
              </div>
            </div>   
            <template #footer>
            <span class="dialog-footer">
                <el-button :disabled="!reNameForm.plotGroupName" @click="submitReName">提交</el-button>
                <el-button type="primary" @click="dialogVisibleCmm=false">
                取消
                </el-button>
            </span>
            </template>  
  </el-dialog>               
</template>

<script lang="ts">
import { preview } from 'vue3-preview-image'
import { ElMessage } from "element-plus";
import bus from '@/utils/bus'
import { defineComponent, ref, reactive, onMounted, onUnmounted } from "vue";
import pieChartS from "@/chart/pieChart/pie-single";
import pieChartM from "@/chart/pieChart/pie-multi";
import tree from "@/components/tree/tree.vue";
import mapView from "@/components/mapContainer/index.vue";
import useDraw from "@/utils/useDraw";
import {getColorByCrop} from "@/utils/common";
import { post, get, deletePost } from "@/public/request/api";
import quandi from "../plantingType/modal/quandi.vue";
import group from "../plantingType/modal/group.vue";
import { ElMessageBox } from 'element-plus'
import { useRouter } from "vue-router";
import storage from '@/store'
import moment from 'moment';
export default defineComponent({
  components: {
    tree,
    pieChartS,
    pieChartM,
    mapView,
    quandi,
    group
  },
  setup() {
    //变量
    let reNameForm=reactive({
      plotGroupName:'',
      id:null,
    }) 
    let pagesizeSet=6
    let dialogVisibleCmm=ref(false)
    const router = useRouter();
    let plotOptionList=reactive({
      value:[]
    })
    const rk=storage.state.userInfo.rk
    const showAdd = ref(true);
    const tabActiveIndex = ref(0);
    const crops = ref([
      {name:'陵两优171',bdColor:'rgba(158,244,145,1)',bgColor:'rgba(158,244,145,0.4)'},
      {name:'荃优粤农丝苗',bdColor:'rgba(253,244,53,1)',bgColor:'rgba(253,244,53,0.4)'},
      {name:'甬籼15',bdColor:'rgba(4,206,255,1)',bgColor:'rgba(4,206,255,0.4)'},
      {name:'臻两优钰占',bdColor:'rgba(144,123,18,1)',bgColor:'rgba(144,123,18,0.4)'},
      {name:'荃两优粤农丝苗',bdColor:'rgba(70,46,255,1)',bgColor:'rgba(70,46,255,0.4)'},
      {name:'泰优398',bdColor:'rgba(210,45,243,1)',bgColor:'rgba(210,45,243,0.4)'},
      {name:'紫两优',bdColor:'rgba(211,161,38,1)',bgColor:'rgba(211,161,38,0.4)'},
      {name:'臻两优5438',bdColor:'rgba(204,102,0,1)',bgColor:'rgba(204,102,0,0.4)'},
      {name:'陵两优171(中稻）',bdColor:'rgba(0,153,51,1)',bgColor:'rgba(0,153,51,0.4)'},
      {name:'巧两优超占',bdColor:'rgba(255,46,189,1)',bgColor:'rgba(255,46,189,0.4)'}
    ])
    const inconArr = [
      {
        img: require("../../assets/img/i1.png"),
        name: "摄像头",
      },
      {
        img: require("../../assets/img/i2.png"),
        name: "路网",
      },
      {
        img: require("../../assets/img/i3.png"),
        name: "虫情测报仪",
      },
      {
        img: require("../../assets/img/i4.png"),
        name: "水网",
      },
      {
        img: require("../../assets/img/i5.png"),
        name: "气象站",
      },
      {
        img: require("../../assets/img/i6.png"),
        name: "仓库",
      },
      {
        img: require("../../assets/img/i7.png"),
        name: "土壤墒情仪",
      },
      {
        img: require("../../assets/img/i8.png"),
        name: "入水口",
      },
      {
        img: require("../../assets/img/i9.png"),
        name: "水肥一体机",
      },
      {
        img: require("../../assets/img/i10.png"),
        name: "出水口",
      },
      {
        img: require("../../assets/img/zsicon.png"),
        name: "长势监测仪",
      },
      {
        img: require("../../assets/img/i11.png"),
        name: "水池",
      },
      {
        img: require("../../assets/img/bzicon.png"),
        name: "孢子仪",
      },
      {
        img: require("../../assets/img/i12.png"),
        name: "阀控器",
      },
      {
        img: require("../../assets/img/i13.png"),
        name: "泵房/井房",
      },
      
      
    ];
    const propsTree = {
      children: "children",
      label: "label",
    };
    let dataTree = reactive({
      value:[
       
      ]
    }) 
    const data = reactive({
      select: "物联网设备",
      list: [
        {
          name: "全部设备",
          check: true,
          key:'all',
        },
        {
          name: "摄像头",
          check: false,
          key:'cam',
        },
        {
          name: "虫情测报灯",
          check: false,
          key:'insect',
        },
        {
          name: "气象站",
          check: false,
          key:'met',
        },
        {
          name: "土壤墒情仪",
          check: false,
          key:'mois',
        },
        {
          name: "水肥一体机",
          check: false,
          key:'water',
        },
        {
          name: "长势监测仪",
          check: false,
          key:'grow',
        },
        {
          name: "孢子仪",
          check: false,
          key:'spore',
        },
      ],
    });
    const data2 = reactive({
      select: "基础设施",
      list: [
        {
          name: "全部设施",
          check: true,
        },
        {
          name: "路网",
          check: false,
        },
        {
          name:'水网',
          check:false
        },
        {
          name: "泵房/井房",
          check: false,
        },
         {
          name: "水池",
          check: false,
        },
        {
          name: "仓库",
          check: false,
        },
        {
          name: "入水口",
          check: false,
        },
        {
          name: "出水口",
          check: false,
        },
        
        {
          name: "阀控器",
          check: false,
        },
       
      ],
    });
    let deviceArrGet=reactive({
      value:[]
    })
    
    let ygType=ref(0)

    const count = require("@/assets/img/count.png");
    const area = require("@/assets/img/area.png");
    const grow = require("@/assets/img/grow.png");
    const reduce = require("@/assets/img/reduce.png");
    let mapData = reactive({
      value:{},
    });
    const rate = ref([
      {
        tips: 48,
        colorData: {
          textStyle: "#fff",
          series: {
            color: ["rgba(255, 255, 255, 0.16)", "transparent"],
            dataColor: {
              normal: "#319AF5",
              shadowColor: "#97e2f5",
            },
          },
        },
      },
      {
        tips: 32,
        colorData: {
          textStyle: "#fff",
          series: {
            color: ["rgba(255, 255, 255, 0.16)", "transparent"],
            dataColor: {
              normal: "#456AE5",
              shadowColor: "#97e2f5",
            },
          },
        },
      },
      {
        tips: 20,
        colorData: {
          textStyle: "#fff",
          series: {
            color: ["rgba(255, 255, 255, 0.16)", "transparent"],
            dataColor: {
              normal: "#E58A2E",
              shadowColor: "#97e2f5",
            },
          },
        },
      },
    ]);
    const percents = ref([
      {
        name: "大豆",
        value: 25,
        count: "2586",
      },
      {
        name: "红薯",
        value: 35,
        count: "2586",
      },
      {
        name: "玉米",
        value: 55,
        count: "2586",
      },
      {
        name: "小麦",
        value: 45,
        count: "2586",
      },
    ]);

    const loading = ref<boolean>(true);
    const active = ref<number>(0);
    let plotAllInfo = reactive({
      value: [],
    });
    let onePlotInfo = reactive({
      value: null,
    });
    let realfarmList=reactive({
      value:[]
    })
    let pageNum=ref(1)
    let total=ref(0)
    let showfarmList=reactive({
      value:[]
    })
    let ygList=reactive({
      value:[]
    })
    let zsList=reactive({
      value:[]
    })
    let picShowList=reactive({
      value:[]
    })
    let wrjList=reactive({
      value:[]
    })
    // * 适配处理
    const { appRef, calcRate, windowDraw, unWindowDraw } = useDraw();
    // 生命周期
    onMounted(() => {
      // todo 屏幕适应
      bus.on('changeBase', mapInit);
      bus.on('addOneBase', mapInit);
      windowDraw();
      calcRate();
      getPlotWithMap();
      getPlotOptionsList()
      getGroupList()
    });

    onUnmounted(() => {
      bus.off('changeBase', mapInit);
      bus.off('addOneBase', mapInit);
      unWindowDraw();
    });
    
    //methods
    function changeShowType(e){
      ygType.value=e
      if(e==0){
        picShowList.value=zsList.value
      }else if(e==1){
        picShowList.value=ygList.value
      }else{
        picShowList.value=wrjList.value
      }
    }
    function getGroupList(){
      get("/plot/getPlotGroupList", {
      }).then((res) => {
        res.data.forEach(item=>{
          item.type='father'
          item.label=item.plotGroupName
          item.handleFlag=false
          item.plotPropList.forEach(item2=>{
            item2.label=item2.plotName
          })
          item.children=item.plotPropList
        })
        
        dataTree.value=res.data
      
      })
    }
    function handleCheckChange() {}
    function clickNode() {}
    const quandiRef = ref(null);
    function addPlot() {
      quandiRef.value.page = 1;
      quandiRef.value.dialogVisible = true;
    }
    function openGroup(){
      this.$refs.group.dialogVisible = true;
    }
    function goPlotDetail(data){
      if(!data.type){
        
        get("/plot/detail", {
          id:data.plotId
        }).then((res) => {
          bus.emit('menuChange', 1);
        sessionStorage.setItem('plotDetail',JSON.stringify(res.data[0]))
          router.push({
          path: "/plantingType/detail",
          query: {
            id: data.plotId,
            name: data.plotName,
            year:moment().format("YYYY") ,
          },
          });
        })
        
      }
    }
    function openPlotInfo(id) {
      

      let getInfo = plotAllInfo.value.find((item) => {
        return item.id == id;
      });
      onePlotInfo.value = getInfo;
      // realfarmList.value=JSON.parse(JSON.stringify(getInfo.farmOperationDataWrappers))
      // showfarmList.value = realfarmList.value.slice((pageNum.value-1)*pagesizeSet,pagesizeSet)
      // total.value=realfarmList.value.length
      showAdd.value = !showAdd;
      ygType.value=0
      getYgList(id)
      getGrow(id)
      getFarmList(id)
    }
    function getFarmList(id){
      
      get("/farmOperation/list", {
        gardenId:id
      }).then((res) => {
        realfarmList.value=JSON.parse(JSON.stringify(res.data))
        showfarmList.value = realfarmList.value.slice((pageNum.value-1)*pagesizeSet,pagesizeSet)
        total.value=realfarmList.value.length
      });
    }
    function getGrow(id){
      get("/device/growPoints", {
        plotId:id
      }).then((res) => {
        zsList.value=res.data
        picShowList.value=res.data
      })
    }
    function getYgList(id){
      get("/device/remoteSensingPoints", {
        plotId:id
      }).then((res) => {
        if(res.data){
          res.data.reverse()
          ygList.value=res.data
          
         
        }
      })
    }
    function closeplotpanpel(){
      showAdd.value=true
    }
    function handleNode(data){
      if(data.handleFlag){
        data.handleFlag=false
      }else{
        dataTree.value.forEach(item=>{
        item.handleFlag=false
        })
        data.handleFlag=true
      }
     
      console.log('handleNode',data)
    }
    const mapRef = ref();
    const treeOne=ref()
    const treeTwo=ref()
    function mapInit(){
      console.log('切换基地了！！')
      treeOne.value.mainCheck(0)
      treeTwo.value.mainCheck(0)
      reDrawMap()
      getGroupList()
    }
    function mapHttp(){
      return new Promise((resolve,reject)=>{
        get("/plot/map", {}).then((res) => {
            //mapData.value = [];
            let addArr = [];
            let deviceArr=[]
            plotAllInfo.value = res.data;
            res.data.forEach((item) => {
              
              if (item.inodeList) {
                let point = [];
                item.inodeList.forEach((item2) => {
                  let one = [];
                  one[0] = item2.lng;
                  one[1] = item2.lat;
                  point.push(one);
                });
                let colorset=null
                let colorfill=null
                let cropnameget=null
                let cropVariety=null
                if(!item.crops||item.crops.length==0){
                  colorset='rgba(112,128,144,1)'
                  colorfill='rgba(112,128,144,0.4)'
                  cropnameget='暂无信息'
                  cropVariety='暂无信息'
                }else{
                  let indexone=item.crops[0]
                  if(indexone.cropsSubclassName){
                    let obj = getColorByCrop(indexone.categoryName)
                    colorset = obj.colorset
                    colorfill = obj.colorfill
                    cropnameget=indexone.cropsSubclassName
                    cropVariety=indexone.categoryName
                  }else{
                    colorset='rgba(112,128,144,1)'
                    colorfill='rgba(112,128,144,0.4)'
                    cropnameget='暂无信息'
                    cropVariety='暂无信息'
                  }
                }
                addArr.push({
                  plotId: item.id,
                  name: item.plotName,
                  contacts: item.principalName,
                  phone: item.principalTel,
                  address: item.address,
                  inPoints:item.inPoints,
                  area: item.plotArea,
                  crop: cropnameget,
                  cropVariety: cropVariety,
                  variety: "鲜食玉米335",
                  density: "等行距6000株",
                  cover: "是",
                  interplant: "玉米大豆间套种",
                  quality: "优秀",
                  starLevel: 5,
                  points: point,
                  color: colorset,
                  fillColor: colorfill,
                  sign:item.sign
                });
              }
              if(item.iotDevices){
                  item.iotDevices.forEach(item2=>{
                  
                  let type=999
                  // met:require("../../assets/img/icon3.png"),
                  // mois:require("../../assets/img/icon2.png"),
                  // water:require("../../assets/img/icon4.png"),
                  // cam:require("../../assets/img/icon1.png"),
                  // insect:require("../../assets/img/icon3.png")
                  let allType=['met','mois','water','cam','insect','spore','grow']
                  if(allType.includes(item2.deviceType)){
                    if(item2.deviceType=='met'){
                      type=1
                    }else if(item2.deviceType=='mois'){
                      type=2
                    }else if(item2.deviceType=='water'){
                      type=3
                    }else if(item2.deviceType=='cam'){
                      type=4
                    }else if(item2.deviceType=='insect'){
                      type=5
                    }else if(item2.deviceType=='grow'){
                      type=6
                    }else if(item2.deviceType=='spore'){
                      type=7
                    }
                    
                    deviceArr.push({
                      plotId:item2.plotId,
                      deviceId:item2.id,
                      name: item2.deviceName,
                      type: type,
                      lat: [item2.lon,item2.lat],
                      manufacturers:item2.manufacturers,
                      deviceStatus:item2.deviceStatus,
                      plotName:item2.plotName,
                      serialNumber:item2.serialNumber,
                      address:item2.address,
                      //fs:'',
                    })
                  }
                  
                })
              }
              
              
            });
            console.log('deviceArr',deviceArr)
            resolve({
              plot:addArr,
              device:deviceArr
            })
          });
      })
    }
    function reDrawMap(){
      mapHttp().then(res=>{
        console.log('xxx',res)
        mapData.value= res['plot']
        deviceArrGet.value=res['device']
        if(res['plot'].length==0){
             ElMessage({
              message: "暂无地块信息",
              //type: "success",
            });
        }
        setTimeout(() => {
          mapRef.value.drawPolygon(); 
          mapRef.value.drawSet()
        }, 500);
      })
    }
    function lookYg(index){
      let newlist=[]
      picShowList.value.forEach(item=>{
        newlist.push(
          'https://wx.linzhiag.com/eqq-plantapp'+item.img
        )
      })
      preview(index,newlist)
    }
    function lookYg2(index){
      let newlist=[]
      picShowList.value.forEach(item=>{
        newlist.push(
          item.data['image']
        )
      })
      preview(index,newlist)
    }
    function getPlotWithMap() {
      mapHttp().then(res=>{
        mapData.value = res['plot']
        deviceArrGet.value=res['device']
        mapRef.value.init();
      })
    }
    function getPlotOptionsList() {
      get("/plot/options", {
        isExclude:1,
      }).then((res) => {
        plotOptionList.value = res.data;
      });
    }
    function deleteOneGroup(data){
      ElMessageBox.confirm("确认删除?")
        .then(() => {
          sureDeteteG(data)
        })
        .catch(() => {
          // catch error
        });
    }
    function sureDeteteG(data){
      console.log('datatttt',data)
      deletePost("/plot/delPlotGroup", {
        id:data.id
      }).then((res) => {
        getGroupList()
        ElMessage({
          message: "删除成功",
          type: "success",
        });
      })
      
    }
    function changeShowDeviceSet(key){
      mapRef.value.drawSet(key)
    }
    function changeShowSs(key,index){
      console.log('index',index)
      //mapRef.value.initMapSet()
      if(key=='全部设施'){
        mapRef.value.initMapSet()
      }else{
        mapRef.value.initMapSet(index)
      }
    }
    function openEditGroup(data){
      data.handleFlag=false
      console.log('data',data)
      reNameForm.plotGroupName=''
      reNameForm.id=data.id
      dialogVisibleCmm.value=true
     
    }
    function submitReName(){
      post("/plot/editPlotGroup", 
        reNameForm
      ).then((res) => {
        if(res.code==200){
          ElMessage({
            message: "重命名成功",
            type: "success",
          });
          dialogVisibleCmm.value = false
          getGroupList()
        }
      }).catch(err=>{
        ElMessage({
            message: err.message,
            type: "error",
          });
      })
    }
    function currentChange(e){
      pageNum.value=e
      let s=(pageNum.value-1)*pagesizeSet
      let end=(pageNum.value)*pagesizeSet
      showfarmList.value=realfarmList.value.slice(s,end)
    }
    // return
    return {
      lookYg2,
      lookYg,
      wrjList,
      zsList,
      picShowList,
      ygList,
      pageNum,
      currentChange,
      showfarmList,
      total,
      closeplotpanpel,
      getGroupList,
      submitReName,
      reNameForm,
      dialogVisibleCmm,
      openEditGroup,
      rk,
      changeShowSs,
      changeShowDeviceSet,
      deleteOneGroup,
      handleNode,
      openGroup,
      plotOptionList,
      deviceArrGet,
      quandiRef,
      addPlot,
      mapRef,
      treeOne,
      treeTwo,
      appRef,
      loading,
      active,
      propsTree,
      dataTree,
      handleCheckChange,
      clickNode,
      openPlotInfo,
      changeShowType,
      ygType,
      data,
      data2,
      inconArr,
      grow,
      reduce,
      count,
      area,
      rate,
      percents,
      showAdd,
      tabActiveIndex,
      mapData,
      onePlotInfo,
      goPlotDetail,
      crops,
    };
  },
});
</script>
<style lang="scss">
.rightwrap{
  .setwrap {
  .el-table th.el-table__cell,
  .el-table .el-table__cell,
  .el-table tr,
  .el-table--fit {
    background: transparent !important;
    color: #fff !important;
  }
  .el-table th.el-table__cell.is-leaf,
  .el-table td.el-table__cell {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  }
  .el-pagination.is-background .el-pager li {
    background: transparent !important;
    color: #fff !important;
  }
  .el-pagination.is-background .btn-next {
    background: none !important;
  }
  .btn-prev {
    background: none !important;
  }
}
}
.indexwrap {
  .el-tree {
    background: transparent !important;
  }
  .el-tree-node:hover,
  .el-tree-node__content:hover {
    background: transparent !important;
  }
  .el-tree-node,
  .el-tree-node__content {
    background: transparent !important;
  }
}
.treeindex{
  .custom-tree-node{
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;
    width: 100%;
  }
  .el-tree-node{
    color: #fff
  }
  .flexspanadd1{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .nodeindex{
   
  }
}

</style>
<style lang="scss" scoped>
@import "@/assets/scss/index.scss";
.nodataadd{
  font-size: 13px;
  color: #fff;
}
.fy{
    width: 100%;
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    .total{
      color: rgba(255, 255, 255, 0.60);
      font-size: 10px;
      span{
        font-size: 20px;
      }
    }
    
}
.nodeicon{
  position: relative;
    .handlebox{
      position: absolute;
      top: 20px;
      right: -2px;
    }
}

.rightwrap {
  position: absolute;
  right: 24px;
  top: 24px;
  z-index: 20;
  background: rgba(255, 255, 255, 0.08);
  padding: 15px;
  border-radius: 15px;
  backdrop-filter: blur(10px);
  width: 360px;
  .thing {
    .date {
      margin-bottom: 10px;
      margin-top: 10px;
    }
    .spic2 {
      width: 120px;
      margin-right: 10px;
    }
    .thingw {
      display: flex;
      flex-wrap: wrap;

      .thingc1 {
        width: 50%;
        font-size: 12px;
        display: flex;
        align-items: center;
        margin-bottom: 6px;
        img {
          width: 20px;
        }
      }
    }
  }
  .picscroll {
    display: flex;
    overflow-x: auto;
    .spic {
      width: 240px;
      border-radius: 15px;
      margin-right: 10px;
      height: 100px;
    }
  }
  .szztscroll{
    max-height: 35vh;
    overflow-y: auto;
  }
  .szzt {
   
    .smallt {
      font-size: 17px;
      margin-top: 10px;
      margin-bottom: 0px;
    }
    .stab {
      display: flex;

      .stabc {
        cursor: pointer;
        color: rgba(255, 255, 255, 1);
        background: rgba(255, 255, 255, 0.08);
        padding: 2px 10px;
        font-size: 13px;
        margin-right: 10px;
        border-radius: 100px;
        margin: 10px 10px 10px 0px;
        font-size: 12px;
      }
      .stabca {
        background: rgba(49, 154, 245, 0.16);
        color: rgba(49, 154, 245, 1);
      }
    }
  }
  .title {
    display: flex;
    justify-content: space-between;
    font-size: 20px;
  }
  .infowrap {
    display: flex;
    margin-top: 20px;
    margin-left: 10px;
    .rinfo5 {
      margin-left: 70px;
    }
    .rinfo {
      display: flex;
      align-items: center;
    }
    .label {
      color: rgba(255, 255, 255, 0.6);
      font-size: 12px;
      margin-bottom: 10px;
    }
    .add {
      width: 40px;
      margin-right: 10px;
    }
  }
}
.rightsidenew {
  position: absolute;
  width: 100%;
  height: 100%;

  top: 0;
  left: 0;
}
.bottomwrap {
  position: absolute;
  bottom: 30px;
  left: 24px;
  display: flex;

  width: 210px;
  height: 240px;
  flex-wrap: wrap;
  z-index: 10;
  font-size: 13px;
  .long {
    width: 125px;
    margin-right: 10px;
  }
  .child {
    justify-content: flex-start !important;
    margin-bottom: 5px;
  }
  .icon {
    margin-right: 10px;
    width: 20px;
  }
}
.right2 {
  background: rgba(255, 255, 255, 0.08);
  padding: 12px;
  border-radius: 20px;
  position: relative;
  z-index: 20;
  backdrop-filter: blur(10px);
  .title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
  }
  .btn {
    background: rgba(49, 154, 245, 1);
    border-radius: 5px;
    margin-left: 10px;
    color: #fff;
    font-size: 10px;
    cursor: pointer;
    box-sizing: border-box;
    padding: 5px 10px;
    span {
      margin-right: 5px;
      position: relative;
      top: 2px;
    }
  }
}
.treewrap {
  display: flex;
  z-index: 999;
  position: relative;
  width: 0px;
}
.rightContent {
  position: absolute;
  top: 24px;
  right: 24px;
  .icons {
    margin-right: 24px;
    .iconInfo {
      margin-bottom: 8px;
      .icon {
        width: 16px;
        height: 16px;
        border-radius: 2px 2px 2px 2px;
        opacity: 1;
        margin-right: 8px;
      }
      .name {
        font-size: 12px;
        font-family: Source Han Sans CN-Medium, Source Han Sans CN;
        font-weight: 500;
        color: #ebeff5;
        line-height: 16px;
        -webkit-background-clip: text;
      }
    }
  }
}
</style>
